<template>
  <div class="box1">
      <h4 class="ziti">{{newinfo.title}}</h4>
     <p class="info">
         <span> 发表时间:{{newinfo.add_time | dateFormat}}</span>  
         <span>点击次数:{{newinfo.click}}</span>
    </p>
    <hr>
    <div class="box" v-html="newinfo.content"></div>
   <comment-box></comment-box>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'
//导入子组件
import comment from '../subcomponent/components.vue'
    export default{
        data(){
            return{
                newinfo:[]
            }
        },
        created () {
          this.getnewinfo()  
        },
        methods:{
            getnewinfo(){
                //获取到当前新闻的id
                var id =this.$route.params.id
                //发送数据请求，获取新闻数据
                this.$http.get('api/getnew/'+id).then(result=>{
                    if(result.body.status===0){
                        this.newinfo = result.body.message[0]
                    }else{
                        Toast('获取数据信息失败')
                    }
                })
                //把新闻数据 保存到data上
                //渲染页面

            }
        },
        components: {
           'comment-box': comment
        }
    }
</script>

<style lang="scss">
.box1{
    padding: 0 4px;
    .ziti{
        color: red;
        font-size: 16px;
        text-align: center;
        margin: 15px 0
    }
    .info{
        display: flex;
        justify-content: space-between;
        color: #26a2ff;
        font-size: 13px;
    }
    .box{
        img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>
